<!--首页页面-->
<style lang="less">
.tousu {
  margin: 15px;
  .smallForm {
    width: 100%;
    display: inline-block;
  }
  .modal-pump {
    .ivu-modal-body {
      float: left;
    }
  }
  #map {
    width: 100%;
    height: 400px;
  }
  .ivu-badge-count {
    top: 0 !important;
    right: 5px !important;
  }
}

.reprotImg {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
}
.bg-red {
  color: red;
}
.bg-orange {
  color: orange;
}
</style>

<template>
  <div class="tousu">

    <!-- 面包屑 -->
    <p class="white"
       style="margin-bottom:20px">待办事项 > <span class="select-font">公文管理</span>
    </p>

    <!-- 切换tabs -->
    <Tabs v-model="currentTab"
          @on-click="clickTab">

      <TabPane label="我发出的"
               name="我发出的">
        <send ref="JSend" />
      </TabPane>

      <TabPane label="我收到的"
               name="我收到的">
        <receive ref="JReceive" />
      </TabPane>

      <TabPane label="回收站"
               name="回收站">
        <retrieve ref="JRetrieve" />
      </TabPane>

      <TabPane label="收藏"
               name="收藏">
        <collect ref="JCollect" />
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
import send from './send';
import receive from './receive';
import retrieve from './retrieve';
import collect from './collect';

export default {
  components: {
    send,
    receive,
    retrieve,
    collect,
  },

  data() {
    return {
      currentTab: '我发出的',
      pageMap: {
        我发出的: 'JSend',
        我收到的: 'JReceive',
        回收站: 'JRetrieve',
        收藏: 'JCollect',
      },
    };
  },

  mounted() {
    if (this.$route.query.type) {
      this.currentTab = '收藏';
      this.$nextTick(() => {
        this.clickTab('收藏');
      });
    }
  },

  beforeRouteUpdate(to, from, next) {
    if (to.query.type) {
      this.currentTab = '收藏';
      this.$nextTick(() => {
        this.clickTab('收藏');
      });
    } else {
      this.currentTab = '我发出的';
      this.$nextTick(() => {
        this.clickTab('我发出的');
      });
    }
    next();
  },

  methods: {
    // 点击tab
    clickTab(name) {
      let ref = this.pageMap[name];
      this.$refs[ref].search('');
    },
  },
};
</script>
